import React, { useState, useEffect, useRef } from 'react'
import { Card, Upload, Button, message } from 'antd';
import { CaretRightOutlined, UploadOutlined } from '@ant-design/icons';
import './daily.less'
import { history } from 'umi'
export default function Daily(props) {
    let intervalHandle = useRef()
    let [done, setOne] = useState([
        { id: 1, title: '关于公司人事任免通知书', day: '2020.06.16' },
        { id: 2, title: '关于2020年春节放假的通知', day: '2020.06.16' },
        { id: 3, title: '关于最新的公司规章制度细节通知', day: '2020.06.16' },
        { id: 4, title: '公司内部招聘公告', day: '2020.06.16' },
        { id: 5, title: '关于开展《经济合同法》的相关培训', day: '2020.06.16' },
        { id: 6, title: '夏雪签署与光大公司的大订单，奖励3000元', day: '2020.06.16' },
        { id: 7, title: '关于六月份综合工作培训内容及相关注意事项通知', day: '2020.06.16' },
        { id: 8, title: '销售部招聘员工通知', day: '2020.06.16' },
        { id: 9, title: '关于各分公司培训会议的通知', day: '2020.06.16' },
    ])
    let [dfour, setFour] = useState([
        { id: 1, title: '陪领导接待_5000.0000_2023-01-30_张研_FY2023010001', day: '2020.06.16' },
        { id: 2, title: '加班申请单', day: '2020.06.16' },
        { id: 3, title: '紧急_关于车辆使用的通告_公开', day: '2020.06.16' },
        { id: 4, title: '加急_关于生态区工程进程的指示_机密', day: '2020.06.16' },
        { id: 5, title: '普通_关于×××同志临危不惧勇斗歹徒的公文_公开', day: '2020.06.16' },
        { id: 6, title: '紧急_关于公司最近工作开展的报告_机密', day: '2020.06.16' },
        { id: 7, title: '加急_关于XX湖生态区开发建设项目协调会会议的决定_机密', day: '2020.06.16' },
        { id: 8, title: '普通_第×届第×次股东会的决议_公开', day: '2020.06.16' },
    ])
    let [dfive, setFive] = useState([
        { id: 1, title: '普通_关于近期安全会议工作_公开', day: '2020.06.16' },
        { id: 2, title: '加急_关于召开优秀企业成功经验高层研讨会的通知_公开', day: '2020.06.16' },
        { id: 3, title: '调薪申请', day: '2020.06.16' },
        { id: 4, title: '加班申请', day: '2020.06.16' },
        { id: 5, title: '出差申请', day: '2020.06.16' },
        { id: 6, title: '考勤异常申请', day: '2020.06.16' },
        { id: 7, title: '发起公文', day: '2020.06.16' },
    ])
    let [dsix, setSix] = useState([
        { id: 1, title: '陪领导接待_5000.0000_2023-01-30_张研_FY2023010001', day: '2020.06.16' },
        { id: 2, title: '加班申请单', day: '2020.06.16' },
        { id: 3, title: '周涛敏_年假_2', day: '2020.06.16' },
        { id: 4, title: '加班申请', day: '2020.06.16' },
        { id: 5, title: '紧急_关于年终结账财务核算的内容通知_公开', day: '2020.06.16' },
        { id: 6, title: '考勤异常申请', day: '2020.06.16' },
    ])
    let [dtwo, setTwo] = useState([
        { id: 1, title: '公司入选2018年中国民营企业500强', day: '2021.01.28', msg: '来源：总部编辑：中国xxxx北京消息（王涛）8月18日，由中华全国工商业联合会评选的“2014中国民营企业500强”榜单揭晓，xxxx位列榜单第28位。“中国民营企业500强”是中华全国工商业联合会在...', imgurl: 'https://erpdemo.fanpusoft.com/UpLoader/News/%E5%85%AC%E5%8F%B8%E5%85%A5%E9%80%892018%E5%B9%B4%E4%B8%AD%E5%9B%BD%E6%B0%91%E8%90%A5%E4%BC%81%E4%B8%9A500%E5%BC%BA.jpg' },
        { id: 2, title: '公司运动会新闻', day: '2021.01.28', msg: '来源：总部编辑：中国xxxx北京消息（王涛）8月18日，由中华全国工商业联合会评选的“2014中国民营企业500强”榜单揭晓，xxxx位列榜单第28位。“中国民营企业500强”是中华全国工商业联合会在...', imgurl: 'https://erpdemo.fanpusoft.com/UpLoader/News/%E5%85%AC%E5%8F%B8%E8%BF%90%E5%8A%A8%E4%BC%9A%E6%96%B0%E9%97%BB.jpg' },
        { id: 3, title: '物流部策划书上线通知', day: '2021.01.28', msg: '来源：总部编辑：中国xxxx北京消息（王涛）8月18日，由中华全国工商业联合会评选的“2014中国民营企业500强”榜单揭晓，xxxx位列榜单第28位。“中国民营企业500强”是中华全国工商业联合会在...', imgurl: 'https://erpdemo.fanpusoft.com/UpLoader/News/%E7%89%A9%E6%B5%81%E9%83%A8%E7%AD%96%E5%88%92%E4%B9%A6%E4%B8%8A%E7%BA%BF%E9%80%9A%E7%9F%A5.jpg' },
    ])
    // 获取 年-月-日 时 分 秒
    function getDate() {
        let date = new Date();
        let week = new Date().getDay();
        let a = new Array("日", "一", "二", "三", "四", "五", "六");
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        let d = date.getDate();
        if (m < 10) {
            return y + '-0' + m + '-' + d + ' ' + "星期" + a[week];
        } else {
            return y + '-' + m + '-' + d + ' ' + "星期" + a[week];
        }
    }
    let [nowtime, setNowtime] = useState()
    // 获取时间
    function getnowtime() {
        let date = new Date();
        let h = date.getHours();
        let min = date.getMinutes();
        let s = date.getSeconds();
        if (min < 10) {
            if (s < 10) {
                setNowtime(h + ':0' + min + ':0' + s)
            } else {
                setNowtime(h + ':0' + min + ':' + s)
            }
        } else {
            if (s < 10) {
                setNowtime(h + ':' + min + ':0' + s)
            } else {
                setNowtime(h + ':' + min + ':' + s)
            }
        }

    }
    // 设置定时器
    intervalHandle.current = setInterval(() => {
        getnowtime()
    }, 1000);

    // 清楚定时器
    useEffect(() => {
        return () => {
            clearInterval(intervalHandle.current);
        };
    }, []);
    // 图片上传
    const canshu = {
        name: 'file',
        action: 'http://localhost:8010/getpath',
        headers: {
            authorization: 'authorization-text',
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };
    // 签到按钮上下班
    let [editbtn, setEditbtn] = useState(false)
    // 上班签到
    let [uptime, setUptime] = useState()
    // 上班显示
    let [show_up, setShowup] = useState(false)
    const qiandaoup = () => {
        console.log(nowtime);
        setEditbtn(true)
        setUptime(nowtime)
        setShowup(true)
    }
    // 下班签到
    let [downtime, setDowntime] = useState()
    // 下班显示
    let [show_down, setShowdown] = useState(false)
    const qiandaodown = () => {
        console.log(nowtime);
        setEditbtn(false)
        setDowntime(nowtime)
        setShowdown(true)
    }
    // 点击事件跳转路由
    const dianmore = () => {
        props.history.push('/more')
    }
    const dianmoretwo = () => {
        props.history.push('/news')
    }
    // 点击标题1
    const clicktitle = (msg) => {
        props.history.push({ pathname: '/xq', state: { t: msg.title, d: msg.day } })
    }
    // 点击标题2
    const clicktitle2 = (msg) => {
        props.history.push({ pathname: '/guanggao', state: { t: msg.title, d: msg.day } })
    }
    // 点击标题2
    const clicktitle4 = () => {
        props.history.push({ pathname: '/jiaban' })
    }
    // 渲染
    return (
        <div className='dailybox'>
            <div className='mainbox'>
                <div className='dayone'>
                    <Card
                        style={{
                            height: 400,
                        }}
                        title="通知公告"
                        extra={<img onClick={() => { dianmore() }} style={{ width: '38px', height: '22px' }} src='https://erpdemo.fanpusoft.com/res/themes/Custom_ERP/more_bg.gif'></img>}
                    >
                        {done.map(i => {
                            return (
                                <div className='ggone' key={i.id}>
                                    <span style={{ fontSize: '13px' }}>
                                        <a className='dailytitle'><CaretRightOutlined style={{ color: 'red' }} /><span onClick={() => { clicktitle(i) }}>{i.title}</span></a>
                                    </span>
                                    <span style={{ color: 'rgb(153,153,153)', fontSize: '13px', margin: '0 8px 0 0' }}>{i.day}</span>
                                </div>
                            )
                        })}
                    </Card>
                </div>
                <div className='dayone'>
                    <Card
                        style={{
                            height: 400,
                        }}
                        title="图片新闻"
                        extra={<img onClick={() => { dianmoretwo() }} style={{ width: '38px', height: '22px' }} src='https://erpdemo.fanpusoft.com/res/themes/Custom_ERP/more_bg.gif'></img>}
                    >
                        {
                            dtwo.map(i => {
                                return (
                                    <div className='dtwo' key={i.id}>
                                        <div>
                                            <img style={{ width: '160px', height: '103px' }} src={i.imgurl} alt="" />
                                        </div>
                                        <div className='twor' onClick={() => { clicktitle2(i) }}>
                                            <div>
                                                <span className='dailytitle' style={{ fontWeight: 'bold' }}><span>{i.title}</span></span>
                                                <span>{i.day}</span>
                                            </div>
                                            <div className='te' style={{ color: '#999' }}>{i.msg}</div>
                                        </div>
                                    </div>
                                )
                            })
                        }

                    </Card>
                </div>
                <div className='dayone'>
                    <Card
                        style={{
                            height: 400,
                        }}
                        title="考勤打卡"
                        extra={<img onClick={() => { dianmoretwo() }} style={{ width: '38px', height: '22px' }} src='https://erpdemo.fanpusoft.com/res/themes/Custom_ERP/more_bg.gif'></img>}
                    >
                        <div className='dthree'>
                            <div className='threetop'>
                                <span>{getDate()}</span>
                                <span>
                                    <Upload {...canshu}>
                                        <Button icon={<UploadOutlined />}>上传照片</Button>
                                    </Upload>
                                </span>
                            </div>
                            <div className='threetop'>
                                <span style={{ fontSize: '35px' }}>{nowtime}</span>
                                {editbtn ? <button onClick={() => { qiandaodown() }} style={{ width: '120px', height: '40px', fontSize: '18px', color: '#2e6e9e', border: 'none' }}>下班签到</button> : <button onClick={() => { qiandaoup() }} style={{ width: '120px', height: '40px', fontSize: '18px', color: '#2e6e9e', border: 'none' }}>上班签到</button>}
                            </div>
                            <div className='main'>
                                <div style={{ margin: '30px 0 0 0', display: show_up ? '' : 'none' }}>
                                    <div>上班打卡时间:{uptime}</div>
                                    <div className='xbox' style={{ backgroundColor: '#1e90ff' }}>电脑</div>
                                    <div className='xbox' style={{ backgroundColor: '#808080' }}>无图</div>
                                    <div className='xbox' style={{ backgroundColor: '#ff0000' }}>正常</div>
                                    <p>打卡地点:&nbsp;&nbsp;<label style={{ fontSize: '14px' }}>127.0.0.1</label></p>
                                </div>
                                <div style={{ margin: '30px 0 0 0', display: show_down ? '' : 'none' }}>
                                    <div>下班打卡时间:{downtime}</div>
                                    <div className='xbox' style={{ backgroundColor: 'rgb(0,128,0)' }}>正常</div>
                                    <div className='xbox' style={{ backgroundColor: '#808080' }}>无图</div>
                                    <div className='xbox' style={{ backgroundColor: '#1e90ff' }}>电脑</div>
                                    <p>打卡地点:&nbsp;&nbsp;<label style={{ fontSize: '14px' }}>127.0.0.1</label></p>
                                </div>
                            </div>
                        </div>
                    </Card>
                </div>
                <div className='dayone'>
                    <Card
                        style={{
                            height: 400,
                        }}
                        title="我的申请"
                        extra={<img onClick={() => { dianmoretwo() }} style={{ width: '38px', height: '22px' }} src='https://erpdemo.fanpusoft.com/res/themes/Custom_ERP/more_bg.gif'></img>}
                    >
                        {dfour.map(i => {
                            return (
                                <div className='ggone' key={i.id}>
                                    <span style={{ fontSize: '13px' }}>
                                        <a className='dailytitle'><CaretRightOutlined style={{ color: 'red' }} /><span onClick={() => { clicktitle4() }}>{i.title}</span></a>
                                    </span>
                                    <span style={{ color: 'rgb(153,153,153)', fontSize: '13px', margin: '0 8px 0 0' }}>{i.day}</span>
                                </div>
                            )
                        })}
                    </Card>
                </div>
                <div className='dayone'>
                    <Card
                        style={{
                            height: 400,
                        }}
                        title="我的代办"
                        extra={<img onClick={() => { dianmoretwo() }} style={{ width: '38px', height: '22px' }} src='https://erpdemo.fanpusoft.com/res/themes/Custom_ERP/more_bg.gif'></img>}
                    >
                        {dfive.map(i => {
                            return (
                                <div className='ggone' key={i.id}>
                                    <span style={{ fontSize: '13px' }}>
                                        <a className='dailytitle'><CaretRightOutlined style={{ color: 'red' }} /><span onClick={() => { clicktitle4(i) }}>{i.title}</span></a>
                                    </span>
                                    <span style={{ color: 'rgb(153,153,153)', fontSize: '13px', margin: '0 8px 0 0' }}>{i.day}</span>
                                </div>
                            )
                        })}
                    </Card>
                </div>
                <div className='dayone'>
                    <Card
                        style={{
                            height: 400,
                        }}
                        title="我的已办"
                        extra={<img onClick={() => { dianmoretwo() }} style={{ width: '38px', height: '22px' }} src='https://erpdemo.fanpusoft.com/res/themes/Custom_ERP/more_bg.gif'></img>}
                    >
                        {dsix.map(i => {
                            return (
                                <div className='ggone' key={i.id}>
                                    <span style={{ fontSize: '13px' }}>
                                        <a className='dailytitle'><CaretRightOutlined style={{ color: 'red' }} /><span onClick={() => { clicktitle4(i) }}>{i.title}</span></a>
                                    </span>
                                    <span style={{ color: 'rgb(153,153,153)', fontSize: '13px', margin: '0 8px 0 0' }}>{i.day}</span>
                                </div>
                            )
                        })}
                    </Card>
                </div>
            </div>
        </div>
    )
}
